<template>
	<view class="auto-table-box">
		<table :class="scroll?'auto-table-scroll':'auto-table'">
			<tr>
				<th :style="{ width: c.width || `${100 / headers.length}%` }" v-for="c in headersList" :key="c.key" v-if="!c.table_hide">{{ c.title || c.lable }}</th>
			</tr>
			<tr v-for="(x, i) in value" :key="i">
				<td :style="{ width: c.width || `${100 / headers.length}%` }" v-for="c in headersList" :key="c.key" v-if="!c.table_hide">
					<template v-if="c.type === 'index'">
						{{ i + 1 }}
					</template>
					<slot v-else :name="c.slot" :row="c" :value="x" :index="i">
						<template v-if="x[c.key] && !c.table_render">
							{{ x[c.key] }}{{ c.unit }}
						</template>
						<template v-else>
							<Expand :render="c.table_render" :keys="c" :index="i" :row="x" :value="x[c.key] || ''"></Expand>
						</template>
					</slot>
				</td>
			</tr>
			<tr v-if="showBottomSum && value.length">
				<th :style="{ width: c.width || `${100 / headersList.length}%` }" v-for="(c, index) in headersList" :key="c.key">
					<slot name="total" :row="c" :index="index">{{ c.total ? c.total + (c.unit || '') : '-' }}</slot>
				</th>
			</tr>
		</table>
		<slot></slot>
	</view>
</template>

<script>
import Expand from './expand.js';
export default {
	components: {
		Expand
	},
	props: {
		value: {
			type: Array,
			default() {
				return [];
			}
		},
		headers: {
			type: Array,
			default() {
				return [];
			}
		},
		showBottomSum: false,
		scroll:""
	},
	computed: {
		headersList(){
			return this.headers.filter((x,i)=>{
				//表格 内嵌 html
				x.table_render = (x.table_render || x.render);
				//技术合计
				if(x.total && !(typeof x.total === 'number')) return x;
				x.total = 0;
				this.value.map(h => {
					x.total = Math.round(x.total + (h[x.key] - 0 || 0), 6);
				});
				//隐藏头
				if(!x.hideHeader){
					return x;
				}
			});
		}
	}
};
</script>

<style lang="scss">
$borderColor: rgba(0, 0, 0, 0.1);
.auto-table-box {
	width: 100%;
	overflow: hidden;
	overflow-x: auto;
	// border: 1px solid $borderColor;
}
.auto-table-scroll {
	/*设置相邻单元格的边框间的距离*/
	border-spacing: 0;
	/*表格设置合并边框模型*/
	border-collapse: collapse;
	text-align: center;
	height: 100%;
	overflow: auto;
	width: 100%;
	border: 1px solid $borderColor;
	tr {
		border-bottom: 1px solid $borderColor;
	}
	td,
	th {
		box-sizing: border-box;
		font-size: 12px;
		font-weight: 400;
		padding: 0.5em;
		line-height: 1.3em;
		border-right: 1px solid $borderColor;
		white-space: nowrap;
	}
	th {
		background-color: #eaeef1;
	}
}


.auto-table {
	/*设置相邻单元格的边框间的距离*/
	border-spacing: 0;
	/*表格设置合并边框模型*/
	border-collapse: collapse;
	text-align: center;
	height: 100%;
	display: block;
	overflow: auto;
	table-layout: fixed;
	border: 1px solid $borderColor;
	word-wrap: break-word;
	word-break: break-all;
	tr {
		display: flex;
		align-content: center;
		border-collapse: collapse;
		border-bottom: 1px solid $borderColor;
		&:last-of-type {
			border: none;
		}
	}
	td,
	th {
		margin: 0;
		padding: 0;
		white-space: normal;
		word-wrap: break-word;
		word-break: break-all;
		font-size: 12px;
		font-weight: 400;
		padding: 0.5em;
		line-height: 1.3em;
		border-right: 1px solid $borderColor;
		display: flex;
		align-items: center;
		justify-content: center;
		&:last-of-type {
			border: none;
		}
	}
	th {
		background-color: #eaeef1;
	}
}
</style>
